<template>
    <div class="task-my-task-viewer-container">
        <div v-if="isDisplay(item.type)" class="task-my-task-viewer">
            <div class="task-my-task-viewer-type" :style="getTypeColor(item.type)">{{getType(item.type)}}</div>
            <div class="task-my-task-viewer-subject">{{item.subject}}</div>
            <div class="task-my-task-viewer-timeleft">{{getLeftDay(item.deadLine)}}</div>
            <div class="task-my-task-viewer-underline" :style="getTypeColor(item.type)"></div>
            <div class="task-my-task-viewer-toFinish" :style="getTypeColor(item.type)" @click="showModal(item)">{{getFinishText(item.me.flag, item.close)}}</div>
        </div>
    </div>
</template>

<script>
import local_script from "@task/js/util";
import date_js from "@script/date";
import $ from "jquery";

export default {
    data() {
        return {
            showList: [],
            sonCheckModal: false
        }
    },
    mounted() {
        this.init()
    },
    props: {
        item: {
            type: Object,
            default: () => {
                return {
                    type: -2
                }
            }
        },
        checkModal: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        list(v) {
            this.showList = [];
            for (let item = 0; item < v.length; item++) {
                const ele = v[item];
                this.showList.push(ele);
            }
        },
        checkModal(v) {
            this.sonCheckModal = v;
        }
    },
    methods: {
        /**
         * 十个任务栏的淡入动画
         */
        init() {
            let items = $(".task-my-task-viewer-container");
            let i = 0
            items.eq(i++).animate({opacity: '1', top: 0}, 1);
            let timer = setInterval(() => {
                items.eq(i++).animate({opacity: '1', top: 0}, 1);
                if (i == 10) {
                    clearInterval(timer);
                }
            }, 100)
        },
        getType(v) {
            return local_script.parseType(v);
        },
        isDisplay(v) {
            return v != -2
        },
        getTypeColor(v) {
            return local_script.getTypeColor(v);
        },
        getFinishText(v, t) {
            if (v == 1 || t == 1) {
                return "查看";
            } else {
                return "去完成";
            }
        },
        getLeftDay(v) {
            let today = date_js.getDate("-");
            let leftTime = date_js.subOfDate(v, today);
            return local_script.getLeftText(leftTime);
        },
        showModal(v) {
            this.$emit("on-change", {
                checkModal: true,
                item: v
            });
        }
    }
}
</script>

<style lang="scss">
@import "@task/scss/my-task-view.scss";
</style>